import React, { Component } from 'react'
import { Route,Switch,Redirect } from 'react-router-dom';
import Home from './pages/home';
import About from './pages/about';
import MyNvaLink from './components/MyNavLink';
export default class App extends Component {
  render() {
    return (
      <div className="container">
        <h1>www</h1>
        <div className="row">
          <div className="col-3">
            <div className="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
              <MyNvaLink to="/home">首页</MyNvaLink>
              <MyNvaLink to="/about">关于</MyNvaLink>
            </div>
          </div>
          <div className="col-9">
            <div className="tab-content" id="v-pills-tabContent">
              {/* Switch组件当路由匹配到一个就不会继续向下匹配了 */}
              <Switch> 
              {/* 默认模糊匹配路由 ，加上exact属性开启严格匹配  严格匹配会导致无法匹配到多级路由，合理使用*/}
                <Route path="/home" component={Home}></Route>
                <Route path="/about" component={About}></Route>
                {/* 关于重定向tab不高亮问题，NavLink需要和Route的路径完全匹配 */}
                <Redirect to="/home"/>
              </Switch>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
